// 考勤审批-工单详情入口
<template>
  <div class="page">
    <div class="function-area">
      <!-- 返回按钮和标题 -->
      <div class="header">
        <button class="back-btn" @click="goBack">
          <img
            class="arrow"
            src="@/assets/xiangmujindu/arrow_right.png"
            style="width: 22px; margin-left: 10px; transform: rotate(180deg)"
          />
        </button>
        <h3>考勤审批</h3>
      </div>
      <!-- Tab 切换 -->
      <!-- <div class="tabs">
        <div
          v-for="(tab, index) in tabs"
          :key="tab + index"
          :class="['tab', { active: activeTab === index }]"
          @click="activeTab = index"
        >
          {{ tab }}
        </div>
      </div> -->
    </div>

    <div class="section" style="margin: 10px 10px 0; padding: 10px">
      <h4 style="margin-bottom: 6px">阳泉D4模组H800集群布线集成服务-09/27</h4>
      <div style="display: flex; align-items: center">
        <img
          src="../assets/xiangmujindu/icon_location.png"
          style="width: 12px; height: 12px"
          alt=""
          srcset=""
        />
        <span style="color: #9d9e9f"
          >考勤地点：阳泉市开发区义白路百度云计算中心</span
        >
      </div>
    </div>

    <div class="context">
      <!-- 区域1 -->
      <div class="section">
        <div class="dropdowns">
          <div class="dropdown">
            <select v-model="selectedYear">
              <option v-for="year in years" :key="year" :value="year">
                {{ year }}年
              </option></select
            >▼
          </div>
          <div class="dropdown">
            <select v-model="selectedMonth" style="width: 25px">
              <option v-for="month in months" :key="month" :value="month">
                {{ month }}月
              </option></select
            >▼
          </div>
        </div>
        <div class="divider"></div>
      </div>

      <!-- 区域2 -->
      <div class="section calendar">
        <div class="weekdays">
          <div
            class="weekday"
            v-for="(day, dayi) in weekdays"
            :key="day + dayi"
          >
            {{ day }}
          </div>
        </div>
        <div class="dates">
          <div
            v-for="(date, di) in calendarDates"
            :key="date.date + di"
            class="date"
            :class="{ inactive: date.isOtherMonth }"
          >
            <span
              :style="{
                display: 'inline-block',
                'min-width': '24px',
                'min-height': '24px',
                'line-height': '24px',
                'background-color': date.date === 13 ? '#98C355' : 'none',
                color: date.date === 13 ? '#fff' : '',
                'border-radius': '50%',
              }"
              >{{ date.date }}</span
            >

            <span v-if="date.hasDot" class="dot"></span>
            <template v-if="generateY(date)">
              <template v-if="!date.isOtherMonth">
                <span class="yellow_point">•</span>
              </template>
            </template>
            <template v-else-if="generateL(date)">
              <template v-if="!date.isOtherMonth">
                <span class="blue_point"></span>
              </template>
            </template>
          </div>
        </div>
      </div>

      <!-- 区域3 -->
      <div class="section checklist">
        <div class="row">
          <input type="checkbox" v-model="allChecked" @change="toggleAll" />
          <span>全选</span>
        </div>
        <div class="divider"></div>

        <div
          v-for="(person, index) in people"
          :key="person + index"
          class="row"
        >
          <div class="left">
            <input type="checkbox" v-model="checkedList[index]" />
            <span>{{ person.name }}</span>
          </div>
          <span class="middle">{{ person.signIn }}</span>
          <span class="right">{{ person.signOut }}</span>
          <div class="right-div">
            <span
              class="right_1"
              :style="{ visibility: isHidden ? 'hidden' : '' }"
              >{{ person.signSucc }}</span
            >
            <span
              class="right_2"
              :style="{ visibility: isHidden ? 'hidden' : '' }"
              >{{ person.signFail }}</span
            >
          </div>
          <div class="divider" v-if="index < people.length - 1"></div>
        </div>
      </div>

      <!-- 区域4 -->
      <div class="section actions">
        <button class="btn reject" @click="refuse">拒绝</button>
        <button class="btn approve" @click="sign">通过</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    const today = new Date();
    const currentYear = today.getFullYear();
    // const currentMonth = today.getMonth() + 1;
    const currentMonth = 9;

    return {
      // 区域1数据
      selectedYear: currentYear,
      selectedMonth: currentMonth,
      years: Array.from(
        { length: currentYear - 2010 + 1 },
        (_, i) => currentYear - i
      ),
      months: Array.from({ length: 12 }, (_, i) => i + 1),

      // 区域2数据
      weekdays: ["一", "二", "三", "四", "五", "六", "日"],
      calendarDates: [],

      // 区域3数据
      allChecked: false,
      checkedList: [false, false, false],
      people: [
        {
          name: "马燕",
          signIn: "签到: 09:10",
          signOut: "签退: 17:10",
          signSucc: "", // 审核通过
          signFail: "",
        },
        {
          name: "张世英",
          signIn: "签到: 09:05",
          signOut: "签退: 17:06",
          signSucc: "", // 审核通过
          signFail: "",
        },
        {
          name: "李恒",
          signIn: "签到: 09:12",
          signOut: "签到: 09:12",
          signSucc: "",
          signFail: "", // 审核失败
        },
      ],
      isHidden: true,
    };
  },
  created() {
    this.generateCalendar();
  },
  mounted() {},
  watch: {
    selectedYear: "generateCalendar",
    selectedMonth: "generateCalendar",
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    // 区域2：生成日历数据
    generateCalendar() {
      const firstDay = new Date(this.selectedYear, this.selectedMonth - 1, 1);
      const lastDay = new Date(this.selectedYear, this.selectedMonth, 0);

      const calendarDates = [];
      const prevDays = (firstDay.getDay() + 6) % 7; // 补齐上月日期
      const nextDays = 6 - ((lastDay.getDay() + 6) % 7); // 补齐下月日期

      // 上个月日期
      for (let i = prevDays; i > 0; i--) {
        const date = new Date(firstDay);
        date.setDate(date.getDate() - i);
        calendarDates.push({
          date: date.getDate(),
          isOtherMonth: true,
          hasDot: false,
        });
      }

      // 当前月日期
      for (let i = 1; i <= lastDay.getDate(); i++) {
        const hasDot = Math.random() % 3 === 0;
        calendarDates.push({ date: i, isOtherMonth: false, hasDot });
      }

      // 下个月日期
      for (let i = 1; i <= nextDays; i++) {
        const date = new Date(lastDay);
        date.setDate(date.getDate() + i);
        calendarDates.push({
          date: date.getDate(),
          isOtherMonth: true,
          hasDot: false,
        });
      }

      this.calendarDates = calendarDates;
    },

    // 区域3：全选/取消全选
    toggleAll() {
      this.checkedList = this.checkedList.map(() => this.allChecked);
    },
    watchCheckedList() {
      this.allChecked = this.checkedList.every((checked) => checked);
    },
    generateY({ date }) {
      const y = [4, 5];
      const c = [13];
      if (y.includes(date)) {
        return true;
      }
    },
    generateL({ date }) {
      const l = [3, 6, 10, 11, 12, 17];
      const c = [13];
      if (l.includes(date)) {
        return true;
      }
    },
    // 通过
    sign() {
      this.isHidden = false;
      this.checkedList.map((item, index) => {
        if (item) {
          this.people[index].signSucc = "审核通过";
          this.people[index].signFail = "";
        }
      });
    },
    refuse() {
      this.isHidden = false;
      this.checkedList.map((item, index) => {
        if (item) {
          this.people[index].signSucc = "";
          this.people[index].signFail = "审核拒绝";
        }
      });
    },
  },
  watch: {
    checkedList: "watchCheckedList",
  },
};
</script>


<style scoped>
html {
  height: 100%;
  /* background: #f4f5f9; */
}
body {
  margin: 0px;

  /* background-color: #f4f5f9; */
}
.page {
  font-size: 13px;
  box-sizing: border-box;
  /* background: #f4f5f9; */
  height: 100%;
}

.context {
  font-size: 13px;
  padding: 10px;
  height: 100%;
  color: #474747;
}

/* 功能区 */
.function-area {
  background-color: white;
  padding: 10px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.back-btn {
  position: absolute;
  left: -1em;

  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}
h1 {
  margin: 0;
}

.context {
  font-size: 13px;
  padding: 10px;
  height: 100%;
  /* background: #ffffff; */
}

/* 公共样式 */
.section {
  /* margin-bottom: 10px; */
  padding: 5px;
  background-color: #fff;
}
.divider {
  height: 1px;
  background-color: #f4f5f9;
  margin: 3px 0;
}

/* 区域1样式 */
.dropdowns {
  display: flex;
  gap: 10px;
}
.dropdown select {
  appearance: none;
  border: none;
  padding: 5px;
  padding-right: 0;
  background: none;
  position: relative;
}
.dropdown select::after {
  content: "▼";
  position: absolute;
  right: 5px;
}

/* 区域2样式 */
.calendar {
  display: flex;
  flex-direction: column;
}
.weekdays,
.dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.weekday,
.date {
  text-align: center;
}
.date {
  position: relative;
  padding: 10px 0;
  color: black;
}
.date.inactive {
  color: #9d9e9f;
}
.dot {
  width: 6px;
  height: 6px;
  background-color: blue;
  border-radius: 50%;
  margin: 0 auto;
}
.yellow_point {
  color: #e49f17;
  position: absolute;
  bottom: 0;
  left: 42%;
}
.blue_point {
  width: 12px;
  height: 12px;
  background-image: url("@/assets/xiangmujindu/duigou.png");
  background-size: contain;
  color: #7e9b4f;
  position: absolute;
  bottom: 0;
  left: 38%;
}
/* 区域3样式 */

.checklist {
  background: #fbfcff;
  /* border-radius: 10px; */
}

.checklist .row {
  display: flex;
  align-items: center;
  padding: 14px 10px;
}
.left {
  display: flex;
  align-items: center;
  width: 85px;
}
.middle,
.right {
  flex: 1;
  /* text-align: center; */
  color: #9d9e9f;
}
.right-div {
  width: 55px;
}

.right_1 {
  color: #7e9b4f;
  visibility: hi;
}

.right_2 {
  color: #e43a10;
  visibility: hi;
}

.right_1_visible {
  visibility: hidd;
}

/* 区域4样式 */
.actions {
  display: flex;
  justify-content: space-between;
  background: none;
  margin-top: 10px;
}
.btn {
  flex: 1;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.btn.reject {
  background-color: #f4f5f9;
  border: 1px solid #98c355;
  color: #98c355;
  margin: 5px;
}
.btn.approve {
  background-color: #98c355;
  color: white;
  border: none;
  margin: 5px;
}
</style>


